/* GLOBAL STYLES */

body {
  	padding: 50px;
  	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

/* INDEX PAGE STYLES */

.logo {
	display: block;
	margin: 0 auto 30px auto;
}

.thumbnail {
	width: 150px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 10px;
}


.photo-overlay {
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transition: all 0.25s linear;
	z-index: -1;
	display: none;
}

.photo-overlay.active {
	display: block;
	opacity: 1;
	z-index: 10;
}

.photo-overlay .close-icon {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #212121;
	padding: 20px;
	font-size: 2.5em;
}



/* DETAIL PAGE STYLES */
/* depreciated 12-1-15 - moving to single page styles */

.detail-page {
}

.detail-page h1 {
	float: left;
}

#mainImage {
	width: 1200px;
	height: 675px;
	display: block;
	margin: 0 auto;
}

.get-qr-button {

}

.bg-image {
	float: left;
	width: 320px;
	height: 180px;
	margin: 20px 50px;
	background-size: cover;
}

.bg-image.city {
	background-image: url('../images/bg/city.jpg');
}

.bg-image.beach {
	background-image: url('../images/bg/beach.jpg');
}

.bg-image.mountains {
	background-image: url('../images/bg/mountains.jpg');
}

.qr-modal {
	background-color: white;
	position: fixed;
	border: 1px solid #212121;
	border-radius: 4px;
	height: 400px;
	width: 300px;
	display: none;
	margin: 0 auto;
	top: 200px;
	left: 50%;
	margin-left: -150px;
	z-index: -1;
	opacity: 0;
	transition: all 0.5s linear;
}

.qr-modal .header {
	padding: 20px;
	border-bottom: 1px solid #212121;
}

.qr-modal .header .title {
}

.qr-modal .header .close-modal {
	cursor: pointer;
	position: absolute;
	padding: 5px;
	top: 5px;
	right: 5px;
	border-radius: 4px;
	border: 1px solid #eee;	
}

.qr-modal .body {
	padding: 20px;
	text-align: center;
}

.qr-modal.active {
	z-index: 1;
	display: block;
	opacity: 1;
}


/* RESULT PAGE STYLES */

.result-page {

}

.result-page .result-image {
	max-width: 100%;
}